<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸属性</title>
		<style>
		    span{
 				font-size: 2em;
				color: rgb(85,255,0);
				background-color: rgba(86,135,72,.1);
			}
			/*--------------最大、小宽度问题--------*/
			div#container{ /*权值：101*/
				background-color: #f0f0f0;
			}
			div.box{
				background-color: #ff0e42;
				color: #fff;
				width: 80%;
				/*最大宽度与普通宽度同时出现，以最大宽度为准*/
				ma x-wid th: 150px;
				/*最小宽度，页面承受最小宽度，小于尺寸，字体或图片位置不变
				同时出现 min-width和max-width，最小值大于最大值，以最小值优先
				*/
				min-width: 400px;
			}
		</style> 
	</head>
	<body>
		<!--所有属性值单位
		   常用尺寸单位：%、px 像素 绝对值 em 移动端 字体倍数
		   常用颜色单位：网页三原色：红、绿、蓝，组成页面上的所有颜色
		                rgb(0~255,0~255,0~255)
						rgba(0~255,0~255,0~255,0~1) 遮罩层
						#rrggbb 十六进制      组成：0~9 a~z A~Z
						常用十六进制：#000000 黑色    #ffffff 白色
						简写十六进制：#ff0  #000  #fff
		-->
		<span>lorem</span>
		<!-- 自适应：最大、小宽高   最小和最大宽度-->
		<div id="container">
			<div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi officiis nam excepturi, ad quia quibusdam alias laborum. Voluptates nobis impedit architecto, odit minus obcaecati eligendi recusandae numquam quis assumenda eum.</div>
		</div>
	</body>
</html>